<template>
    <div class="DialogSearch" >
        <div class="top">
           <div class="title-box">
                 <span class="title">当前播放</span>
           </div>
            <ul class="history">
                <li>林俊杰</li>
                <li>中国说唱巅峰对决</li>
                <li>在你身边</li>
                <li>告五人</li>
                <li>林俊杰</li>
            </ul>
        </div>
        <div class="title-box2">
                 <span class="title">当前播放</span>
        </div>
        <ul class="list">
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
            <li class="flex-list">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span v-show="bf.bf" :class="{bfStyle:bf.bf==true}">1</span>
                    </div>
                    <div class="list-pm-top">
                        <div>
                            <span class="singerName">同渡</span>
                            <span class="introduce">（电影《侍神令》推广曲）</span>
                            <span class="popularity">172344</span>
                            <span class="HOT">HOT</span>
                        </div>
                        <div class="list-pm-top-bottom">
                            拥有着此时又何必
                        </div>
                    </div>
                    <!-- <span class="SQ-grad">MV</span> -->
                </div>
            </li>
        </ul> 
    </div>
</template>
<script>
import Char from './slotChar.vue'
export default {
   data() {
    return {
        DialogH:document.documentElement.clientHeight,
        bf:{
            index:1,
            bf:true
        },
        
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{

   },
   components:{Char},

   mounted(){
        window.onresize=()=>{
            this.DialogH = document.documentElement.clientHeight;
        }
   },
   methods:{
    isShowlogin(){
        
    },
    show(){
        this.$emit("dislogScSoon", !this.data[0])

    },
    //按新建 关闭收藏弹窗 修改父级组件打开新建弹窗
    fund(){
        this.$emit('fund',true)
        this.$emit("dislogScSoon", !this.data[0])
    }
   }
   
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1660989543054') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.DialogSearch::-webkit-scrollbar{
      width: 8px;
    border-right: 1px solid #F3F3F3;
}
.DialogSearch::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #E1E1E1;

    height: 30px !important;
}  
.DialogSearch{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%) ;
   overflow-y: scroll;
    background: white;
    // border-radius: 20px;
    width: 440px;
    height: 560px;


   position:fixed;
//    top: 50%;
   left: 16%;
    // transform: translate(-50%,-50%);

     .title-box2{
          margin: 20px 22px 17px 22px;
     .title{
    font-size: 20px;
    font-weight: 200;
     color:#676767;
   }
   }

  .top{
    margin: 20px 22px;
//    border-bottom: 1px solid #F3F3F3;
   .title-box{
    margin-bottom: 17px;
     .title{
    font-size: 20px;
    font-weight: 200;
     color:#676767;
   }
   }
    ul{

    
         li{
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 15px;
            color: #373737;
            border: #D8D8D8 1px solid;
            display: inline-block;
            margin-right: 13px;
            margin-bottom: 13px;
         }
         li:hover{
            background: #F2F2F2;
         }
    }
  }
  .list{
  
        .flex-list{
            display: flex;
            align-items: center;
            height: 67px;
        }
    li{
        height: 45px;
        width: 100%;
        box-sizing: border-box;
        padding:20px 22px;
        .bfStyle{
            color: #EC4141 !important;
        }
        .list-left{
            width: 55%;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            overflow: hidden;
            // justify-content: center;
            .bf-box{
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                // justify-content: center;
                span{
                    font-size: 21px;
                }
            }
            .list-pm-top{
                .introduce{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 0;
            }
            .popularity{
                font-size: 13px;
                color: #CCCCCC;
                margin-left:5px ;
            }
            .list-pm-top-bottom{
                font-size: 15px;
                margin-top: 6px;
                color: #CCCCCC;
                letter-spacing:1px;
                    font-weight: 100;
            }
            }
    
      
        }

        .singerName{
             font-size: 15px;
             color: #333333;
              white-space: nowrap;
              font-weight: 800;
        }
    }
    li:hover{
        background: #F5F5F5;
        .list-right{
            .singer,.time{
                color: #333333;
            }
        }
    }
    li:nth-of-type(even){
        background: #FAFAFA;
    }
    li:nth-of-type(even):hover{
        background: #F5F5F5;
    }
  }
}
   
</style>